<template>
  <div class="news-page">
    <!-- 导航区 -->
    <ul class="news-nav">
      <li class="news-item" v-for="item in newsList" :key="item.id">
        <!-- 第一种传参的写法 -->
        <!-- <RouterLink :to="`/route-test/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}</RouterLink> -->

        <!-- 第二种传参的写法 -->
        <!-- <RouterLink
          :to="{
            path: '/route-test/news/detail',
            query: {
              id: item.id,
              title: item.title,
              content: item.content
            }
          }"
        >
          {{ item.title }}
        </RouterLink> -->
        <!-- 第三种传参写法，直接使用parmas传参 -->
         <RouterLink
          :to="{
            name: 'detail',
            params: {
              id: item.id,
              title: item.title,
              content: item.content
            }
          }"
        >
          {{ item.title }}
        </RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
console.log('news-setup生命周期')
const newsList = reactive([
  { id: "news1", title: "很好的抗癌食物", content: "西蓝花" },
  { id: "news2", title: "如何一夜暴富", content: "找富婆" },
  { id: "news3", title: "震惊！万万没想到", content: "明天是周一" },
  { id: "news4", title: "好消息！", content: "神威加强了！" },
]);
</script>
<style scoped>
.news-item {
  margin-top: 10px;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
.news-page {
  display: flex;

}
.news-nav {
  width: 200px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.news-content {
  border: 1px solid blue;
  width: 100%;
  margin-left: 20px;
}


</style>
